
<template>
    <div class="iframe-cont">
        <div class="content">
            <div class="title">{{$route.meta.title}}</div>
            <el-divider></el-divider>
            <!-- 筛选区 -->
            <div class="select-view">
                <search-device-class
                    :multiple="false"
                    @select="handleMacType"
                ></search-device-class>
                <el-input class="search-group mar-left-20"
                          style="width: 220px" placeholder="设备编号"
                          size="small"
                          clearable
                          v-model="queryParams.keyword"
                          @keydown.native.enter="handleQuery"
                >
                    <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
                </el-input>
            </div>

            <!-- 列表 -->
            <el-table class="th-bg" :data="dataList" :row-key="(row)=>{return row.id}"
                      v-loading="loading"  element-loading-text="加载中" element-loading-spinner="el-icon-loading"
            >
                <el-table-column label="序号" prop="name" width="60" fixed>
                    <template slot-scope="scope">
                        <span>{{(queryParams.page - 1) * queryParams.limit + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="设备编号" prop="siteCode">
                    <template slot-scope="scope">
                        <span>{{scope.row.macCode || '无数据'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="设备类型" prop="siteName">
                    <template slot-scope="scope">
                        <span>{{scope.row.deviceClassName || '无数据'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属运营商" prop="contactName">
                    <template slot-scope="scope">
                        <span>{{scope.row.operName || '无数据'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="异常类型" prop="contactPhone">
                    <template slot-scope="scope">
                        <span>{{scope.row.contactPhone || '无数据'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="时间" prop="addTime" width="160" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.addTime || '无数据'}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="120px" align="center">
                    <template slot-scope="{row}">
                        <el-button v-if="row.returnStatus===0" type="text" @click="gotoDetail(row)">退款</el-button>
                        <span v-else class="no-refund">无退款</span>
                        <el-button type="text" @click="gotoDetail(row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.limit"
                @pagination="getList"
            />
        </div>
    </div>
</template>

<script>
    import SearchMacType from "@/components/SearchCondition/SearchMacType";
    import {getUnusualRecord} from "@/api/fill";
    import SearchDeviceClass from "@/components/SearchCondition/SearchDeviceClass";
    export default {
        components: {SearchDeviceClass, SearchMacType},
        data(){
            return{
                dataList: [1],
                total: 0,  //总量
                loading: true,
                queryParams: {
                    limit: this.$tmp.PAGE_SIZES[0],
                    page: 1,
                    macType: null,
                    macStatus: null, // 2-正常,3-故障
                    connectStatus: null, // 0-在线，1-离线
                    keyword: null,
                }
            }
        },
        created() {
            this.getList();
        },
        methods:{
            handleQuery() {
                this.queryParams.page = 1
                this.getList()
            },
            handleMacType(e) {
                this.queryParams.deviceClass = e.ids
                this.handleQuery()
            },
            gotoDetail(row) {
                this.$router.push('/device/unusualFillRecord/detail?id='+row.id)
            },
            getList(){
                this.loading = true
                getUnusualRecord(this.queryParams).then(res=>{
                    this.dataList = res.data;
                    this.total = res.count;
                }).finally(() => {
                    this.loading = false
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .add-dialog{
        .text{
            width: 150px;
            margin-left: 30px;
            margin-bottom: 10px;
        }
        .message{
            width: 370px;
            margin-bottom: 10px;
        }
        .date-1{
            width: 370px;
        }
    }
    .content {

        .line{
            width: 100%;
            background-color: #A4A4A4;
            height: 1px;
            margin-top: 20px;
        }
        .select-view {
            display: flex;
            align-items: center;
            margin-top: 35px;
            .icon-btn{
                margin-left: 20px;
            }
            .tip {
                margin-left: 35px;
                margin-right: 15px;
            }
            .tip.t1 {
                margin-left: 0;
            }
            .el-select {
                width: 120px;
            }
            .date-1 {
                margin-left: 35px;
            }
            .i-btn {
                margin-left: 20px;
            }
        }
        .th-bg{
            margin-top: 40px;
        }
    }

    .no-refund {
        margin-right: 20px;
        color: #999999;
    }

</style>
